import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import ageStatisticsService from "@/modules/statisticalManagement/ageStatistics.service";
import useNavigator from "@/hooks/useNavigator";
import { useStore as useUserStore } from "@/store/user";
import { message, Modal } from "ant-design-vue";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const addRef = ref(null as any);
    const voucherRef = ref(null as any);
    const state = reactive({
      toolbar: {
        left: ["refresh"],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "年龄范围(岁)",
          dataIndex: "age_group",
          align: "center",
          width: "120px",
        },
        {
          title: "累计参保人数",
          dataIndex: "count",
          align: "center",
          width: "120px",
        },
        {
          title: "累计保费数",
          dataIndex: "sum_premium",
          align: "center",
          width: "100px",
        },
      ],
      loading: false,
      searchForm: {
        age_group: {
          type: "select",
          label: "年龄范围",
          attrs: { placeholder: "请选择年龄" },
          datas: [
            {
              label: "全部",
              value: 0,
            },
            {
              label: "16-25",
              value: 1,
            },
            {
              label: "26-35",
              value: 2,
            },
            {
              label: "36-45",
              value: 3,
            },
            {
              label: "46-60",
              value: 4,
            },
          ],
        },
        type: {
          type: "select",
          label: "保险类型",
          attrs: { placeholder: "请选择保险类型",},
          datas: [
            {
              label:"商保",
              value:1
            },
            {
              label:"低保",
              value:2
            }
          ],
        },
        start_date_start_time: {
          type: "date",
          label: "生效开始时间",
        },
        start_date_end_time: {
          type: "date",
          label: "生效结束时间",
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new ageStatisticsService();
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = (e: any) => {
      LTableRef.value.$fetchTableData();
    };
    const deleteRow = (id: string | number) => {
      Modal.confirm({
        title: "提示",
        content: "确认取消?",
        onOk: () => {
          $service
            .delete({
              order_no: id,
            })
            .then((res: any) => {
              LTableRef.value.$fetchTableData();
            });
        },
      });
    };
    return () => (
      <Page>
        <CardWithTitle title="年龄统计">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              //row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "age_group") {
                    return (
                       <div>{record.minAge}-{record.maxAge}</div>
                    );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    );
  },
});
